import React from "react";
import { Routes, Route } from "react-router-dom";
import Layout from "./Layout";
import List from "./components/List/";
import Cart from "./components/Cart/";
import Home from "./components/Home/";
import Detail from "./components/Detail/";
import NoMatch from "./components/NoMatch";
import StoreProvider from "./tools/StoreProvider";

const App: React.FC = () => {
  return (
    <StoreProvider>
      <div>
        <h1>书店demo</h1>
        <Routes>
          <Route path="/" element={<Layout />}>
            <Route index element={<Home />} />
            <Route path="list" element={<List />} />
            <Route path="cart" element={<Cart />} />
            <Route path="detail/:id" element={<Detail />} />

            {/* Using path="*"" means "match anything", so this route
          acts like a catch-all for URLs that we don't have explicit
          routes for. */}
            <Route path="*" element={<NoMatch />} />
          </Route>
        </Routes>
      </div>
    </StoreProvider>
  );
};

export default App;
